<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步————数据请求</title>
</head>

<body>
    <ul id="posts"></ul>
    <script>
        // // 前端拉取数据API xhr 对象
        // const xhr = new XMLHttpRequest();
        // xhr.open("GET", "http://127.0.0.1:3000/posts", true);
        // xhr.send();// 发送请求
        // // http 请求响应式
        // xhr.addEventListener('readystatechange', function (event) {
        //     // console.log(event);
        //     if (event.target.readyState === 4) { // 数据全部到达了
        //         document.getElementById('posts').innerHTML =
        //             // JSON.parse()强制类型转换
        //             JSON.parse(event.target.responseText).map(item => `
        //             <li>
        //                 ${item.id} ${item.title} ${item.author}
        //             </li>
        //         `);
        //     }
        // })

        // // 前端拉取数据API fetch
        // 由异步变同步

        // 封装
        function ajax(url, cb) {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.send();
            xhr.addEventListener('readystatechange', function (event) {
                // console.log(event);
                if (event.target.readyState === 4) { // 数据全部到达了
                    let data = JSON.parse(event.target.responseText);
                    console.log(data);
                    cb();
                }
            })
        }
        // 使用 回调函数 ，实现异步任务嵌套，异步任务同步化，控制代码的执行流程
        ajax('http://127.0.0.1:3000/posts', () => {
            ajax('http://127.0.0.1:3001/users', () => {
                ajax('http://127.0.0.1:3000/posts/1/comments', () => {
                    console.log('over');
                })
            });
        });


        // let posts = [];
        // let users = [];
        // fetch('http://127.0.0.1:3000/posts')
        //     // 二进制文件流=>json化
        //     .then(data => data.json())
        //     .then(data => {
        //         posts = [...data];
        //         fetch('http://127.0.0.1:3001/users')
        //             // 二进制文件流=>json化
        //             .then(data => data.json())
        //             .then(data => {
        //                 users = [...data];
        //                 console.log(posts, users, '_____')
        //             })
        //     })
        // console.log('--------')


    </script>
</body>

</html>